<template>
  <div class="box">
    <hd titles="订单"></hd>
    <van-tabs v-model="active" animated swipeable>
      <van-tab :title="headItem.typename" v-for="headItem in types" :key="headItem.id">
        <div class="goodsbox" v-for="(item,index) in orders" :key="index" @click="getIndex(index)" v-if="item.payState == headItem.typename||headItem.typename=='全部'">
          <van-row class="head">
            <!--第一行-->
            <van-col span="9" offset="0" class="head-text">{{item.orderNum}}</van-col>
            <van-col span="5" offset="10" class="head-text paystate">{{item.payState}}</van-col>
          </van-row>
          <!--第二行-->
          <van-row class="goodinfo">
            <van-col span="7" class="goodpic">
              <img :src='item.goodsPic' alt="">
            </van-col>
            <van-col span="16" offset="1" class="goodtext">
              <span class="positionTitle">[{{item.positionTitle}}]</span>
              <span class="showinfo">{{item.showinfo}}</span>
            </van-col>
            <van-col span="16" offset="1" class="spec">
              <span class="spec-name">规格:{{item.specName}}</span>
              <span class="spec-num">x {{item.specNum}}</span>
            </van-col>
          </van-row>
          <!--第三行-->
          <van-row class="pay">
            <span class="money">实付：￥{{item.Mymoney}}</span>
          </van-row>
          <!--第四行-->
          <van-row class="buttonArea">

            <goodsboxButton
              @changeCheckState="checkShowState"
              @changeCommentState="commentShowState"
              :payState="item.payState"
              :checkPic="item.checkPic"
              :myValue="item.value"
              :msg="item.message"
            ></goodsboxButton>

          </van-row>
        </div>

      </van-tab>
    </van-tabs>

    <van-dialog v-model="checkshow" title="请出示二维码给核销员" show-cancel-button class="checkPic">
      <img :src="goodsBox[itemIndex].checkPic"/>
    </van-dialog>
    <van-dialog v-model="commentShow" title="" show-cancel-button class="">
      <div class="commentHead"><span>我的评论</span></div>
      <div class="commentStar">
        <span>评分 </span>
        <van-rate v-model="goodsBox[itemIndex].value" allow-half void-icon="star" void-color="#eee"/>
      </div>
      <div class="commentArea">
        <van-field
          v-model="goodsBox[itemIndex].message"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="150"
          placeholder="请输入留言"
          show-word-limit
        />
      </div>
    </van-dialog>

  </div>
</template>

<script>
  import Vue from 'vue';
  import {Dialog} from 'vant';
  import goodsboxButton from "./goodsboxButton";
  // 全局注册
  Vue.use(Dialog);
  export default {
    name: "goodsbox",


    data() {
      return {

        checkshow: false,
        commentShow: false,
        itemIndex: '0',


        active: 0,
        types: [
          {
            id: 1,
            typename: '全部'
          }, {
            id: 2,
            typename: '待付款'
          }, {
            id: 3,
            typename: '待成团'
          }, {
            id: 4,
            typename: '待核销'
          }, {
            id: 5,
            typename: '待发货'
          }, {
            id: 6,
            typename: '待收货'
          }, {
            id: 7,
            typename: '待评价'
          }
        ],
        goodsBox: [
          {
            id: 1,
            positionTitle: '仅限深圳同城包邮',
            showinfo: '新鲜水果上市 大荔冬枣 5斤/箱 枣香枣脆',
            specName: '箱',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待付款',
            goodsPic: 'https://cdn4.buysellads.net/uu/1/3386/1525189943-38523.png',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 0.5,
          },
          {
            id: 2,
            positionTitle: '非偏远地区包邮',
            showinfo: '大贝壳，好吃好好吃',
            specName: '盒',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待成团',
            goodsPic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2909747258,3377462521&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 5,
          },
          {
            id: 3,
            positionTitle: '全国包邮',
            showinfo: '扬州炒饭，惊艳您的味蕾',
            specName: '碗',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待核销',
            goodsPic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=375845140,1625759192&fm=26&gp=0.jpg',
            checkPic: '',
            message: '',
            value: 3.5,
          },
          {
            id: 4,
            positionTitle: '成都限购！！',
            showinfo: '满汉全席，口水直流，值得拥有',
            specName: '台',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待发货',
            goodsPic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1233030547,2197034390&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 4.5,
          },
          {
            id: 5,
            positionTitle: '农村饭菜！！',
            showinfo: '农村饭菜，香甜可口，值得拥有，入手不亏',
            specName: '桌',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待收货',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2780670623,2453990667&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
          {
            id: 6,
            positionTitle: '天津人天天吃！！',
            showinfo: '大煎饼！一个管饱胀一天',
            specName: '个',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待评价',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3654025998,17565898&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 2,
          },
          {
            id: 7,
            positionTitle: '仅限深圳同城包邮',
            showinfo: '新鲜水果上市 大荔冬枣 5斤/箱 枣香枣脆',
            specName: '箱',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待付款',
            goodsPic: 'https://cdn4.buysellads.net/uu/1/3386/1525189943-38523.png',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 0.5,
          },
          {
            id: 8,
            positionTitle: '非偏远地区包邮',
            showinfo: '大贝壳，好吃好好吃',
            specName: '盒',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待成团',
            goodsPic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2909747258,3377462521&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 5,
          },
          {
            id: 9,
            positionTitle: '全国包邮',
            showinfo: '扬州炒饭，惊艳您的味蕾',
            specName: '碗',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待核销',
            goodsPic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=375845140,1625759192&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
          {
            id: 10,
            positionTitle: '成都限购！！',
            showinfo: '满汉全席，口水直流，值得拥有',
            specName: '台',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待发货',
            goodsPic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1233030547,2197034390&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 4.5,
          },
          {
            id: 11,
            positionTitle: '农村饭菜！！',
            showinfo: '农村饭菜，香甜可口，值得拥有，入手不亏',
            specName: '桌',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待收货',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2780670623,2453990667&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
          {
            id: 12,
            positionTitle: '天津人天天吃！！',
            showinfo: '大煎饼！一个管饱胀一天',
            specName: '个',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待评价',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3654025998,17565898&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
          {
            id: 13,
            positionTitle: '仅限深圳同城包邮',
            showinfo: '新鲜水果上市 大荔冬枣 5斤/箱 枣香枣脆',
            specName: '箱',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待付款',
            goodsPic: 'https://cdn4.buysellads.net/uu/1/3386/1525189943-38523.png',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 0.5,
          },
          {
            id: 14,
            positionTitle: '非偏远地区包邮',
            showinfo: '大贝壳，好吃好好吃',
            specName: '盒',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待成团',
            goodsPic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2909747258,3377462521&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 5,
          },
          {
            id: 15,
            positionTitle: '全国包邮',
            showinfo: '扬州炒饭，惊艳您的味蕾',
            specName: '碗',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待核销',
            goodsPic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=375845140,1625759192&fm=26&gp=0.jpg',
            checkPic: '',
            message: '',
            value: 3.5,
          },
          {
            id: 16,
            positionTitle: '成都限购！！',
            showinfo: '满汉全席，口水直流，值得拥有',
            specName: '台',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待发货',
            goodsPic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1233030547,2197034390&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 4.5,
          },
          {
            id: 17,
            positionTitle: '农村饭菜！！',
            showinfo: '农村饭菜，香甜可口，值得拥有，入手不亏',
            specName: '桌',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待收货',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2780670623,2453990667&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
          {
            id: 18,
            positionTitle: '天津人天天吃！！',
            showinfo: '大煎饼！一个管饱胀一天',
            specName: '个',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待评价',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3654025998,17565898&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 2,
          },
          {
            id: 19,
            positionTitle: '仅限深圳同城包邮',
            showinfo: '新鲜水果上市 大荔冬枣 5斤/箱 枣香枣脆',
            specName: '箱',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待付款',
            goodsPic: 'https://cdn4.buysellads.net/uu/1/3386/1525189943-38523.png',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 0.5,
          },
          {
            id: 20,
            positionTitle: '非偏远地区包邮',
            showinfo: '大贝壳，好吃好好吃',
            specName: '盒',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待成团',
            goodsPic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2909747258,3377462521&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 5,
          },
          {
            id: 21,
            positionTitle: '全国包邮',
            showinfo: '扬州炒饭，惊艳您的味蕾',
            specName: '碗',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待核销',
            goodsPic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=375845140,1625759192&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
          {
            id: 22,
            positionTitle: '成都限购！！',
            showinfo: '满汉全席，口水直流，值得拥有',
            specName: '台',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待发货',
            goodsPic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1233030547,2197034390&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 4.5,
          },
          {
            id: 23,
            positionTitle: '农村饭菜！！',
            showinfo: '农村饭菜，香甜可口，值得拥有，入手不亏',
            specName: '桌',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待收货',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2780670623,2453990667&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
          {
            id: 24,
            positionTitle: '天津人天天吃！！',
            showinfo: '大煎饼！一个管饱胀一天',
            specName: '个',
            specNum: 22,
            Mymoney: 2333,
            orderNum: '1998101020202678',
            payState: '待评价',
            goodsPic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3654025998,17565898&fm=26&gp=0.jpg',
            checkPic: 'https://tse3-mm.cn.bing.net/th/id/OIP.-4iKJTQIEhKnAGgGjHr3EQHaHc?w=209&h=210&c=7&o=5&pid=1.7',
            message: '',
            value: 3.5,
          },
        ],

      }
    },

    components: {
      [Dialog.Component.name]: Dialog.Component,
      goodsboxButton,
      hd : () =>import('@/components/public/hd'),
    },
    computed:{
      orders(){
        return this.$store.state.orders
      }
    },

    methods: {
      checkShowState() {
        this.checkshow = !this.checkshow;
      },
      commentShowState() {
        this.commentShow = !this.commentShow;
      },
      getIndex(obj) {
        console.log(obj);
        this.itemIndex = obj;
      },
    },
    mounted() {
    }


  }

</script>

<style scoped>
  .goodsbox {
    margin: 10px auto;
    background-color: white;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #807f7f;
    width: 97%;

  }

  .head {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 300;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    padding-left: 15px;
  }
  .head-text{
    color: #3b3a3a;
  }
  .goodinfo {
    width: 100%;
    height: 100px;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    position: relative;
  }

  .goodpic {
    width: 100px;
    height: 100px;
  }

  .goodinfo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .goodtext {
    height: 50%;
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    color: #3b3a3a;
    padding-right: 5px;
  }

  .positionTitle {
    font-weight: bold;
  }
  .showinfo{
    color: #3b3a3a;

  }
  .spec {
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: 20px;
    line-height: 20px;
    padding: 0 15px;
    color: darkgrey;
    font-size: 13px;
  }

  .spec-name {
    float: left;
  }

  .spec-num {
    float: right;
  }

  .pay {
    height: 30px;
    width: 100%;
    line-height: 30px;
    text-align: right;
    color: #383636;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }
  .pay .money{
    margin-right: 15px;
    font-size: 14px;
    color: #3b3a3a;
  }
  .buttonArea {
    height: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  button {
    height: 30px;
    margin: 5px 5px 5px 5px;
    background-color: lightblue;
    color: white;
    font-size: 13px;
    padding: 0 5px;
    border-radius: 15px;
    outline: none;
    float: right;
  }

  .checkPic img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }


  .commentArea {
    clear: both;
  }

  .commentHead {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding-left: 10px;
    line-height: 30px;
    font-weight: 300;
    font-size: 14px;
    text-align: left;
  }

  .commentStar {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin-bottom: 5px;
    padding-left: 10px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 300;
  }

  .commentStar span {
    float: left;
  }

  .star {
    float: left;
    margin-top: 4px;
  }
</style>
